<!DOCTYPE html>
<html lang="ch">
<head>
    <title>天气案例</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结：
        data中的数据是原始数据，在其他地方引用要用this
        methods中的方法在标签体中调用是要加()的，在标签属性中都行
    -->
    <div id="demo">
        <h3>今天天气很{{info}}{{x}}</h3>
        <button @click="test">切换天气{{test2()}}</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //关闭生产提示
        new Vue({
            el:"#demo",
            data:{
                name:"test",
                isHot:true,
                x:1
            },
            computed:{
                info(){
                    return this.isHot ? "热":"凉"
                   
                }
            },
            methods:{
                changeWeather(){
                    
                    return this.isHot = !this.isHot
                },
                test(){
                    this.isHot = !this.isHot
                    console.log(this.x++)
                    return this.x
                },
                test2(){
                    return "你好"
                }
            }
        })
    </script>
</body>
</html>